<template>
  <q-dialog v-model="dialogShow" persistent>
    <div class="full-width relative-position" style="max-width: 300px">
      <div class="close-box flex justify-end">
        <div class="center" @click="dialogShow = false">
          <img src="~/assets/images/prod/windowcolse.png" style="width: 20px; height: 20px" />
        </div>
      </div>
      <div>
        <div class="center">
          <img src="~/assets/images/prod/dialog_top1.png" style="width: 100px" />
        </div>
        <div class="center" style="margin-top: -34px">
          <img src="~/assets/images/prod/dialog_top.png" style="width: 72px" />
        </div>
      </div>
      <div
        class="card-bg full-width q-px-md q-pb-lg text-center overflow-hidden"
        style="border-radius: 8px; margin-top: -40px; padding-top: 40px"
      >
        <div style="color: #222; font-size: 15px; font-weight: bold" class="q-mt-sm">
          金耀花专属额度审批成功
        </div>
        <div style="color: #f09f07; font-weight: bold" class="q-mt-xs">
          <span style="color: #ffad13; font-size: 14px">￥</span
          ><span style="font-size: 28px; font-family: DIN-Medium, DIN">{{
            (prod || approve) ? Number(Number(approve?.maxLoanAmount || prod?.lnAmount.split('-')[1] || 0).toFixed(0)).toLocaleString() : '50,000'
          }}</span>
        </div>
        <div style="color: #222; font-size: 14px" class="q-mt-sm">额度领取，剩余有效时间</div>
        <div style="font-weight: bold; font-size: 16px; color: #ff5254" class="q-mt-xs">
          - {{ timeText }} -
        </div>

        <q-btn
          unelevated
          rounded
          @click="prod ? gotoProd(2, prod!) : approveClickHandler(approve!)"
          padding="sm"
          class="full-width q-mt-md btn"
          style="background: #ffd101; color: #000; font-weight: bold; letter-spacing: 1px; font-size: 16px"
        >
          <span class="q-py-xs">立即领取</span>
          <div class="pointer">
            <img src="~/assets/images/public/pointer.png" style="display: block; width: 45px" />
          </div>
        </q-btn>
      </div>
    </div>
    <Protocol ref="ProtocolRef" />
  </q-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { computed, onUnmounted, ref } from 'vue';
import { ProdItem, gotoProd } from '../prodList';
import duration from 'dayjs/plugin/duration';
import { MatchResultOrderItemList } from 'src/types/matchResult';
import { useMechanismStore } from 'src/stores/mechanism-store';
import { approveClickCountApi } from 'src/api/merchant';
import Protocol from './Protocol.vue';
import { ProtocolInstance } from './Protocol';

dayjs.extend(duration);

const ProtocolRef = ref<ProtocolInstance>();
const prod = ref<ProdItem>();
const approve = ref<MatchResultOrderItemList>()
const dialogShow = ref(false);
const time = ref<number>(1000 * 60 * 60 * 24 - 1);
const timeText = computed(() => {
  return dayjs.duration(time.value).format('HH:mm:ss');
});
let interval: number;

const startTime = () => {
  clearInterval(interval);
  time.value = 1000 * 60 * 60 * 24 - 1;
  interval = window.setInterval(() => {
    time.value -= 1000;
    if (time.value <= 0) {
      clearInterval(interval);
    }
  }, 1000);
};

onUnmounted(() => {
  clearInterval(interval);
});

const show = (_prod: ProdItem) => {
  approve.value = undefined;
  prod.value = _prod;
  startTime();
  dialogShow.value = true;
};

const showApprove = (match: MatchResultOrderItemList) => {
  prod.value = undefined;
  approve.value = match;
  startTime();
  dialogShow.value = true;
};

const approveClickHandler = async (item: MatchResultOrderItemList) => {
  if (item.protocolUrl) {
    ProtocolRef.value?.show(item);
    return;
  }
  const { orderId } = useMechanismStore();
  await approveClickCountApi({ orderNo: orderId, orderItemId: item.orderItemId });
  if (!item.approveUrl) return;
  window.location.href = item.approveUrl;
};

defineExpose({show, showApprove, getShow: () => dialogShow.value})
</script>

<style lang="scss" scoped>
.card-bg {
  background: linear-gradient(180deg, #fdeac2 0%, #ffffff 100%);
}
.btn {
  position: relative;
  .pointer {
    position: absolute;
    right: calc(15% - 22px);
    top: 42%;
  }
}
.close-box {
  position: absolute;
  top: 35px;
  right: 0;
}
</style>
